<template>
    <div class="box">
        <div>
            <!-- <img src='../../assets/左上角.png'> -->
        </div>
        <div class="top">
            <div class="avatar" @click="tologin()">
                <img src="../../assets/2020-12-17 172850.png">
            </div>
            <div class="userinfo" >
                <div v-if="getuser()">
                    <p>账号：{{nickname}}</p>
                    <p>昵称：{{username}}</p>
                </div>
                <div v-else>
                    <p @click="tologin()">登录</p>
                    <p @click="toregister()">账号</p>
                </div>
            </div>
            <div class="message">
                <van-icon name="chat-o" badge="99+" size="30px"><br><p class="text-s">消息</p></van-icon>
            </div>
        </div>
        <div claa="tejia">
            <van-notice-bar left-icon="eye-o" :scrollable="false">
                <van-swipe
                        horizontal
                        class="notice-swipe"
                        :autoplay="2000"
                        :touchable="false"
                        :show-indicators="false"
                    >
                    <van-swipe-item>重大消息：今日蔬菜打特价！</van-swipe-item>
                    <van-swipe-item>点击即可开通会员</van-swipe-item>
                    <van-swipe-item>开通会员，购买更加优惠，一单回本</van-swipe-item>
                </van-swipe>
            </van-notice-bar>
        </div>        
        <div class="middle">
            <div class="middle-1">
                <van-cell title="我的订单" is-link />
                <van-grid :column-num="5" :border="false">
                    <van-grid-item icon="credit-pay" text="待付款" badge="3" />
                    <van-grid-item icon="logistics" text="待取货" badge="1" />
                    <van-grid-item icon="chat-o" text="待评价" />
                    <van-grid-item icon="after-sale" text="退款/售后" badge="1" />
                    <van-grid-item icon="orders-o" text="全部订单" />
                </van-grid>
                      
            </div>
            <div class="middle-2">
                 <van-grid :column-num="5" :border="false">
                    <van-grid-item icon="star-o" text="收藏" />
                    <!-- 优惠券开始 -->
                    <van-grid-item icon="coupon-o" 
                        text="优惠券" :coupons="coupons"
                        :chosen-coupon="chosenCoupon"
                        @click="showList = true"
                        />
                    <van-popup
                    v-model="showList"
                    round
                    position="bottom"
                    style="height: 90%; padding-top: 4px;"
                    >
                    <van-coupon-list
                        :coupons="coupons"
                        :chosen-coupon="chosenCoupon"
                        :disabled-coupons="disabledCoupons"
                        @change="onChange"
                        @exchange="onExchange"
                    />
                    </van-popup>
                    <!-- 优惠券结束 -->
                    <!-- 分享开始 -->
                    <van-grid-item icon="share-o" text="分享" @click="showShare = true" />
                    <van-share-sheet
                        v-model="showShare"
                        title="立即分享给好友"
                        :options="options"
                        @select="onSelect"
                        />
                    <!-- 分享结束 -->
                    <van-grid-item icon="vip-card-o" text="会员中心" />
                    <!-- 支付管理开始 -->
                    <van-grid-item icon="paid" text="支付管理" @click="showPopup1" />
                    <van-popup v-model="showone" position="top" round closeable close-icon="clear" :style="{height:'25%' }">
                    <p style="size:20px;font-weight:bold;text-align:center">支付方式</p>
                    <hr style="height:2px solid"/>
                        <van-icon name="wechat" color="rgb(22, 176, 5)" size="50" @click="showPopup3"/>
                        <van-popup v-model="showwechat"><img src="../../assets/微信二维码.png" style="weight:200px;height:200px"></van-popup>
                        <van-icon name="alipay" color="#0099ff" size="50" @click="showPopup4"/>
                        <van-popup v-model="showalipay"><img src="../../assets/支付宝二维码.png" style="weight:200px;height:200px"></van-popup>
                        <van-icon name="card" color="" size="50" />
                        <div class="paytext">
                            <p>微信支付</p>
                            <p>支付宝支付</p>
                            <p>银行卡支付</p>
                        </div>                                                
                    </van-popup>
                    <!-- 支付管理结束 -->
                    <van-grid-item icon="location-o" text="地址管理" to="../cart/address"/>
                    <van-grid-item icon="shop-o" text="自提点" />
                    <van-grid-item icon="notes-o" text="意见反馈" dot />
                    <van-grid-item icon="service-o" text="客服" />
                    <!-- 设置开始 -->
                    <van-grid-item icon="setting-o" text="设置" @click="showPopup2" />
                        <van-popup v-model="showtwo" position="bottom"  :style="{ height: '100%' }" close-on-click-action >
                            <van-nav-bar
                                title="设置"
                                left-text="返回"
                                left-arrow
                                @click-left="toreturn()"
                                />
                                <div class="jiange">
                                </div>
                                <van-collapse v-model="activeNames" accordion>
                                    <van-collapse-item name="1"> 
                                        <template #title>
                                            <div>个人中心<van-icon name="question-o" color="#ee0a24"/></div>
                                        </template>
                                        <van-cell title="修改昵称" />
                                        <van-cell title="修改手机号" />
                                        <van-cell title="修改邮箱" />
                                    </van-collapse-item>
                                    <van-collapse-item name="2">
                                        <template #title>
                                            <div>账号与安全<van-icon name="fail" color="#ee0a24"/></div>
                                        </template>
                                        <van-cell title="修改密码" is-link />
                                    </van-collapse-item>
                                </van-collapse>
                                <div class="jiange">
                                </div>
                                    <van-cell title="消息通知设置"><van-icon name="arrow" /></van-cell>
                                    <van-cell title="通用" is-link value="音效、个性皮肤等"/>
                                    <van-cell title="提货人信息管理" is-link />
                                    <van-cell title="隐私" is-link />
                                    <van-cell title="平台资质与规则" is-link />
                                    <van-cell title="热线电话" is-link value="10086"/>
                                <div class="jiange">
                                </div>
                                    <van-cell title="商家入驻" is-link />
                                    <van-cell title="关于我们" is-link/>
                                    <div class="jiange">
                                </div>
                                <van-cell-group inset>
                                <van-cell center to="/my/login">
                                    <van-button round color="linear-gradient(to right, #f59650, #ff6034, red)">
                                    切换账号
                                    </van-button>
                                </van-cell>
                                <van-cell to="/my/register">
                                    <van-button round color="linear-gradient(to right, #f59650, #ff6034, red)">
                                    注册账号
                                    </van-button>
                                </van-cell>
                                <van-cell  @click="tologout()">
                                    <van-button round color="linear-gradient(to right, #f59650, #ff6034, red)">
                                    退出登录
                                    </van-button>
                                </van-cell>
                            </van-cell-group>
                            <div class="setfoot">
                                <a href="#">《个人信息共享清单》</a>
                                <a href="#">《个人信息收集清单》</a>
                                <a href="#">《邻家优选平台规则》</a>
                                <a href="#">《邻家优选规则》</a>
                                <a href="#">《买菜规则》</a>
                                <p>当前版本:v1.1.1(10000)_1.2.3.4(9999)_lingjiayouxuan</p>
                            </div>
                        </van-popup>
                <!-- 设置结束 -->
                    </van-grid>
                </div>
        </div>
        <div class="like">
            <h3>猜你喜欢</h3>
        <!--推荐分类的开始和商品推荐 -->
                <div class="typePro" v-for="typePro in tp" :key="typePro.id">
                    <div class="product" v-for="product in typePro.products" :key="product.id">
                        <p class="supplier">本商品产自{{product.supplier}}</p>
                        <img :src="product.banner">
                        <p class="proname">{{product.name}}</p>
                        <p class="specs">商品规则:{{product.specs}}</p>
                        <p class="price">价格:￥{{product.price}}元</p>
                        <van-button round @click="addcart(product)" type="info" color="linear-gradient(to right, #f59650, #ff6034, red)">加入购物车</van-button>
                    </div>
                </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Icon } from 'vant';
import { Grid, GridItem } from 'vant';
import {getCookie,removeCookie} from '@/utils/cookie'
import { Popover } from 'vant';
import { Toast } from 'vant';
import { NoticeBar } from 'vant';
import { ShareSheet } from 'vant';
import { Overlay } from 'vant';
import { Popup } from 'vant';
import { Cell, CellGroup } from 'vant';
import {getBanner,getTypes,getTP,addCart} from '@/request'
import { CouponCell, CouponList } from 'vant';
import { NavBar } from 'vant';
import { Collapse, CollapseItem } from 'vant';

Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(NavBar);
Vue.use(CouponCell);
Vue.use(CouponList);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Popup);
Vue.use(Overlay);
Vue.use(ShareSheet);
Vue.use(NoticeBar);
Vue.use(Popover);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Icon);
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠100元',
  reason: '',
  value: 150,
  name: '【通用券】会员卡专享券',
  startAt: 1671681616,
  endAt: 1672459216,
  valueDesc: '3',
  unitDesc: '元',

};
const discoupon = {
  available: 2,
  condition: '无使用门槛\n',
  reason: '',
  value: 150,
  name: '邻家优选爆品限时立减券',
  startAt: 1669086016,
  endAt: 1671681616,
  valueDesc: '20',
  unitDesc: '元',

};
export default{
    data(){
        return {
            showone: false,
            showtwo: false,
            showwechat:false,
            showalipay:false,
            showList:false,
            chosenCoupon: -1,
            coupons: [coupon],
            disabledCoupons: [discoupon],
            types:[],
            tp :[],
            activeNames: ['1'],
            username:'',
            nickname:'',
            showPopover: false,
            showShare: false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
      ],
      
        }
    },
    created(){
        this.qingqiu()
    },
    methods:{
    async qingqiu(){
        var banners = await getBanner()
        var types=await getTypes()
        var tp=await getTP()
        this.banners=banners
        this.types=types
        this.tp=tp
    },
    showPopup1() {
            this.showone = true;
    },
    showPopup2() {
            this.showtwo = true;
    },
    showPopup3() {
            this.showwechat = true;
    },
    showPopup4() {
            this.showalipay= true;
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    tologin(){
        this.$router.push('/my/login')
    },
    toreturn(){
        this.showtwo=false;
    },
    tologout () {
        // var _this = this
        var username = getCookie('username')
        if(!username){
            Toast.fail('还未登录');
        }else{
        removeCookie('username',null,)
        removeCookie('nickname',null,)
        Toast.success('退出成功');
        // _this.$router.push('/my')
        this.showtwo=false
        }
    },
    toregister(){
        this.$router.push('/my/register')
    },
    getuser(){
        if(getCookie('username')){
            this.username = getCookie('username')
            this.nickname = getCookie('nickname')
            return true
        }
        return false
    },
    onSelect(option) {
        Toast(option.name);
        this.showShare = false;
    },
    addcart(product){
        //判断用户是否登录
        var _this = this
        var username = getCookie('username')
        //没有登录就强行跳转到登录
        if(!username){
            Toast.fail({
                message:'请先登录',
                onClose(){
                    //先将当前路径存储在本地存储 -做标记
                    window.localStorage.setItem('url','/my')
                    _this.$router.push('/my/login')
                }
            });
            return
        }
        //如果登录了就准备数据
        //整理数据：当前商品的数据+用户信息+商品的数量
        product.username = username
        product.number = 1
        // console.log(product);
        //发送请求
        addCart(product).then(data=>{
            // console.log(data);
            Toast.success(data.msg)
        })

    }
  }, 
}
</script>
<style scoped>
.box{
    width: 95%;
    height: 10000px;
    padding: 10px;
    background-color: #ff9000;
    background-image: url('../../assets/右上角.png') ;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    background-position: 100% 0;
}

.top{
    height: 100px;
    display: flex;
    justify-content: spa;
    align-items: center;
    padding: 11px;
    margin: -10px;
    background-image: url('../../assets/左上角.png') ;
    background-size: 150px 130px;
    background-repeat: no-repeat;
}
.top img{
    width: 100%;
    height: 80px;
}
.top .userinfo{
    flex: 1;
}
.top .avatar{
    margin: 35px 20px;
}
.top .p{
    font-size: 20px;

}
.message{
    margin-right:30px;
}
.message .text-s{
    font-size: 15px;
}

.middle{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgb(239, 239, 239);
    margin:-10px;
    height: 350px;
}
.middle .middle-1{
    width: 90%;
    margin: 0 auto;
    padding:10px;
}
.middle .middle-2{
    width: 90%;
    margin:0 auto;
    padding:8px;
    background-color: #fff;
    border-radius: 20px;
}
.middle .middle-3{
    width: 90%;
    margin: 0 auto;
    padding:8px
}

.notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  .van-notice-bar{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin: 0 auto;
    height: 50px;
    position: inherit;
    width: 320px;
  }
/* 推荐的商品和分类开始 */
.like{
    width: 100%;
    margin:0 auto;
}
.like>h3{
    text-align: center;
    color: rgb(255, 255, 255);
}
.product{
    display: block;
    background-color: rgb(255, 251, 251);
    padding:0px;
    margin:15px 5px;
    border-radius:20px;
    float: left;
    width: 180px;
    height: 480px;
}
.product .supplier{
    text-align: center;
    font-size: 15px;
}
.product img{
    margin:0 9px;
    width: 90%;
    height: 180px;
    border-radius: 20px;
}
.product .proname, .product .specs{
    font-size: 15px;
    padding: 0 10px;
}
.product .price{
    font-size: 18px;
    font-weight: bold;
    color: rgb(225, 0, 0);
    padding-left: 10px;
}

.van-button{
    display: block;
    width: 80%;
    font-size: 12px;
    margin: 0 auto;
}
.van-popup .van-icon{
    margin:0 40px;
}
.van-popup  .van-cell{
    width: 100%;
}
.paytext{
    width: 100%;
    height: 20px;
}
.paytext p{
    float: left;
    margin:10px 28px;
}
.jiange{
    width: 100%;
    height: 10px;
    background-color: #ececec;
}
.setfoot{
    width: 300px;
    margin: 0 auto;
}
.setfoot a{
    font-size: 10px;
}
.setfoot p{
    font-size: 10px;
}
</style>